import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import { Menu } from 'antd';
import './index.less';
import { connect } from 'react-redux';
const SubMenu = Menu.SubMenu;


const router = {
  'login': ['login', 'login'],
  'Login': ['login', 'login'],
  'Register': ['Register', 'Register'],
  'net': ['网络管理', '网络管理'],
  'Net': ['网络管理', '网络管理'],
  '': ['控制面板', '控制面板'],
  'chaincode': ['合约管理', 'Chaincode管理'],
  'chaincodeTemplate': ['合约管理', 'Chaincode模板库'],
  'accountService': ['组织管理', '组织管理'],
  'keyManagement': ['账户服务', '密钥管理'],
  'certificateManagement': ['账户服务', '证书管理'],
  'changePassword': ['账户服务', '密码修改'],
  'changePhone': ['账户服务', '手机修改'],
  'info': ['账户服务', '信息管理'],
  'nodeManage': ['节点管理', '节点管理'],
  'controlPanel': ['控制面板', '控制面板'],
  'documentPdf': ['文档', '文档'],
  'log': ['日志', '日志'],
};


class LeftSider extends Component {
  rootSubmenuKeys = ['控制面板', '组织管理', '网络管理', '合约管理', '节点管理', '账户服务', '文档', '日志', '区块链浏览器'];

  constructor() {
    super();
    this.state = {
    };
  }
  componentDidMount() {
    var hash = window.location.hash.split('/')[1] ? window.location.hash.split('/')[1] : '';
    this.setState({
      openKeys: [router[hash][0]],
      selectedKeys: [router[hash][1]]
    });
  }
  componentWillUpdate(nextprops, nextstate) {
    // console.log(111, nextprops,this.state.props);
    var hash = window.location.hash.split('/')[1] ? window.location.hash.split('/')[1] : '';
    if (!this.state.selectedKeys || nextstate.selectedKeys[0] != this.state.selectedKeys[0]) {
      // console.log(this.state.selectedKeys, nextstate.selectedKeys);
      this.setState({
        openKeys: [router[hash][0]],
        selectedKeys: [router[hash][1]]
      });
    }
  }
  onOpenChange = (openKeys) => {
    const latestOpenKey = openKeys.find(key => this.state.openKeys.indexOf(key) === -1);
    if (this.rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
      this.setState({ openKeys });
    } else {
      this.setState({
        openKeys: latestOpenKey ? [latestOpenKey] : [],
      });
    }
  }

  onSelect=(item, key, selectedKeys) => {
    var newbread = [this.state.openKeys[0], item.key];
    this.setState({
      selectedKeys: item ? item.selectedKeys : [],
    });
  }

  linkHref = () => {
    const token = localStorage.getItem('token');
    const userName = localStorage.getItem('userName');
    window.open('http://testbrowserbaas.sinochembaas.com/?userName=' + userName + '&token=' + token); // 测试环境
    // window.open('http://browser.sinochembaas.com/?userName='+ userName +'&token='+ token) //正式环境
  }

  render() {
    return (
      <div className="menuClass">
        <Menu
          theme="dark"
          mode="inline"
          openKeys={this.state.openKeys}
          onOpenChange={this.onOpenChange}
          style={{ width: 200 }}
          selectedKeys={this.state.selectedKeys}
          onSelect={this.onSelect}
        >
          <Menu.Item key="控制面板"><Link to="/controlPanel"><i className="icon"></i>控制面板</Link></Menu.Item>
          <Menu.Item key="组织管理"><Link to="/accountService"><i className="icon icon_1"></i>组织管理</Link></Menu.Item>
          <Menu.Item key="网络管理"><Link to="/net"><i className="icon icon_2"></i>网络管理</Link></Menu.Item>

          <SubMenu key="合约管理" title={<span><i className="icon icon_3"></i><span>合约管理</span></span>}>
            <Menu.Item key="Chaincode管理"><Link to="/chaincode"><i className="subIcon"></i>Chaincode管理</Link></Menu.Item>
            <Menu.Item key="Chaincode模板库"><Link to="/chaincodeTemplate"><i className="subIcon"></i>Chaincode模板库</Link></Menu.Item>
          </SubMenu>
          {/* <Menu.Item key="节点管理"><Link to="/nodeManage"><i className="icon icon_3"></i>节点管理</Link></Menu.Item> */}
          <SubMenu key="账户服务" title={<span><i className="icon icon_4"></i><span>账户服务</span></span>}>
            <Menu.Item key="密码修改"><Link to="/changePassword"><i className="subIcon"></i>密码修改</Link></Menu.Item>
            <Menu.Item key="手机修改"><Link to="/changePhone"><i className="subIcon"></i>手机修改</Link></Menu.Item>
            <Menu.Item key="信息管理"><Link to="/info"><i className="subIcon"></i>信息管理</Link></Menu.Item>
            {/* <Menu.Item key="证书管理"><Link to="/certificateManagement"><i className="subIcon"></i>证书管理</Link></Menu.Item>
            <Menu.Item key="密钥管理"><Link to="/keyManagement"><i className="subIcon"></i>密钥管理</Link></Menu.Item> */}
          </SubMenu>
          <Menu.Item key="文档"><Link to="/documentPdf"><i className="icon icon_5"></i>文档</Link></Menu.Item>
          <Menu.Item key="日志"><Link to="/log"><i className="icon icon_6"></i>日志</Link></Menu.Item>
          <Menu.Item key="区块链浏览器" ><p onClick={this.linkHref} style={{ margin: '0' }}><i className="icon icon_7"></i>区块链浏览器</p></Menu.Item>
        </Menu>
      </div>
    );
  }
}

export default connect((state) => {
  return { ...state };
})(LeftSider);
